<template>
    <div class="system-menu-container">
        <el-dialog title="新增设备" v-model="isShowDialog" width="769px">
            <el-form :model="ruleForm" size="small" label-width="80px">
                <el-row :gutter="35">
                    <el-col :xs="20" :sm="10" :md="10" :lg="10" :xl="10" class="mb20">
                        <el-form-item label="设备名称">
                            <el-input v-if="has_update" v-model="dtoAioEqu.equName" disabled/>
                            <el-input v-if="!has_update"
                                      v-model="dtoAioEqu.equName"
                                      @input="onVerifyEquName($event)"
                                      placeholder="2-16位"
                                      clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="4" :sm="2" :md="2" :lg="2" :xl="2" class="mb20">
                        <i class="el-icon-success" v-show="check.equName== true"/>
                        <i class="el-icon-error" v-show="!check.equName == true
                        && dtoAioEqu.equName != null
                        && dtoAioEqu.equName.length >0"/>
                    </el-col>


                    <el-col :xs="20" :sm="10" :md="10" :lg="10" :xl="10" class="mb20">
                        <el-form-item label="设备串号">
                            <el-input v-model="dtoAioEqu.equSn"
                                      @input="onVerifyEquSn($event)"
                                      placeholder="2-16位"
                                      clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="4" :sm="2" :md="2" :lg="2" :xl="2" class="mb20">
                        <i class="el-icon-success" v-show="check.equSn== true"/>
                        <i class="el-icon-error" v-show="!check.equSn == true
                        && dtoAioEqu.equSn != null
                        && dtoAioEqu.equSn.length >0"/>
                    </el-col>

                    <el-col :xs="20" :sm="10" :md="10" :lg="10" :xl="10" class="mb20">
                        <el-form-item label="所属单位">
                            <el-select v-if="!has_update"
                                       v-model="adminId"
                                       @change="getItem(value,'radio')"
                                       placeholder="选择单位">
                                <el-option v-for="item in options" :key="item.adminId" :label="item.nickName"
                                           :value="item.adminId"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="4" :sm="2" :md="2" :lg="2" :xl="2" class="mb20">
                    </el-col>


                </el-row>
            </el-form>
            <template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="small">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="small">确 定</el-button>
				</span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
	import { addAioEqu } from '/@/api/equ.ts';
	import { findCompany } from '/@/api/mech.ts';
	import { getCurrentInstance, reactive, toRefs } from 'vue';
	import { clearSession, getSession } from '/@/utils/storage.ts';
	import {
		verifyLength_2_16,
	} from '/@/utils/toolsValidate.ts';
	import { setBackEndControlRefreshRoutes } from '/@/router';
	import { useRoute } from 'vue-router';

	export default {
		name: 'mech_member',
		setup() {
			const { proxy } = getCurrentInstance() as any;
			const route = useRoute();

			const state = reactive({
				isShowDialog: false,
				head: {
					token: '' + getSession('token'),
				},

				url: import.meta.env.VITE_API_URL + '/s-file/api/file/uploads',
				has_update: false,
				/**
				 * 参数请参考 `/src/router/index.ts` 中的 `dynamicRoutes` 路由菜单格式（请注意参数类型！）
				 * 受到 `element plus` 类型 `string/number/object` 影响，不可使用 `:value="true"`
				 * 的写法，所以传值到后台时，需要转换成布尔值，否则页面可能出现玄学。
				 * 路由权限标识为数组格式，基本都需要自行转换类型
				 */
				ruleForm: {
					name: '', // 路由名称
					component: '', // 组件地址
					isLink: '', // 是否外链
					menuSort: '', // 菜单排序
					meta: {
						title: '', // 菜单名称
						icon: '', // 菜单图标
						isHide: '', // 是否隐藏
						isKeepAlive: '', // 是否缓存
						isAffix: '', // 是否固定
						isLink: '', // 是否外链，开启外链条件，`1、isLink:true 2、链接地址不为空`
						isIframe: '', // 是否内嵌，开启条件，`1、isIframe:true 2、链接地址不为空`
						auth: '', // 路由权限标识（多个请用逗号隔开），最后转成数组格式
					},

				},
				dtoAioEqu: {
					equId: 0,
					equName: '',
					equSn: '',
					adminId: 0,

				},
				dialogVisible: false,
				check: {
					equName: false,
					equSn: false,
				},
				options: [],

				adminId: 0,

			});
			// 打开弹窗
			const openDialog = (row?: object) => {
				console.log('====>>openDialog');
				console.log(row);
				state.has_update = false;
				initForm();
				if (row) {
					state.has_update = true;
					//
					// state.dtoAioEqu.userId = row.userId;
					// state.dtoAioMember.userName = row.userName;
					// state.dtoAioMember.fullName = row.fullName;
					// state.dtoAioMember.phoneNumber = row.phoneNumber;
					// state.dtoAioMember.company = row.company;
					// state.dtoAioMember.headUrl = row.headUrl;
					//
					//
					// onVerifyAdminName(state.dtoAioMember.userName);
					// onVerifyFullName(state.dtoAioMember.fullName);
					// onVerifyPhone(state.dtoAioMember.phoneNumber);
					// onVerifyNickName(state.dtoAioMember.company);

				}

				onVerifyEquName(state.dtoAioEqu.equName);
				state.isShowDialog = true;
			};
			// 关闭弹窗
			const closeDialog = (row?: object) => {
				console.log(row);
				state.isShowDialog = false;
				proxy.$emit('fuzujian');

			};
			// 是否内嵌下拉改变
			const onSelectIframeChange = () => {
				if (state.ruleForm.meta.isIframe === 'true') {
					state.ruleForm.isLink = 'true';
				} else {
					state.ruleForm.isLink = '';
				}
			};
			// 取消
			const onCancel = () => {
				closeDialog();
				initForm();
			};
			// 表单初始化，方法：`resetFields()` 无法使用
			const initForm = () => {
				console.log('====>>initForm');
				state.dtoAioEqu.equId = 0;
				state.dtoAioEqu.equName = '疆域一体机';
				state.dtoAioEqu.equSn = '';
				state.dtoAioEqu.adminId = 0;

				findSelect();
			};
			const findSelect = () => {
				findCompany().then((res: any) => {
					state.options = res.data;
					state.adminId = res.data[0].adminId;
				});
			};
			// 提交
			const onSubmit = () => {
				state.dtoAioEqu.adminId = state.adminId;
				// console.log(state.dtoAioAdmin); // 数据，请注意需要转换的类型
				if (state.has_update) {

				} else {
					addAioEqu(state.dtoAioEqu).then((res: any) => {
						if (res.code == 1001) {
							closeDialog(); // 关闭弹窗
							// setBackEndControlRefreshRoutes() // 刷新菜单，未进行后端接口测试
							// parent.location.reload(); //F5
						}

					});
				}

			};

			//校验
			const onVerifyEquName = (val: string) => {
				state.check.equName = verifyLength_2_16(val);
			};
			const onVerifyEquSn = (val: string) => {
				state.check.equSn = verifyLength_2_16(val);
			};

			const getItem = (obj, type) => {
				console.log(obj);
				console.log(type);
			};
			return {
				openDialog,
				closeDialog,
				onSelectIframeChange,
				onCancel,
				onSubmit,
				...toRefs(state),

				getItem,
				onVerifyEquName,
				onVerifyEquSn,
			};
		},
	};
</script>

<style>
    .avatar-uploader {
        width: 8rem;
        height: 8rem;


    }

    .avatar {
        width: 8rem;
        height: 8rem;

    }

    .el-icon-success {
        color: #22bc76;
        font-size: 1.5rem;
    }

    .el-icon-error {
        color: red;
        font-size: 1.5rem;
    }
</style>
